<template>
  <div id="app" class="forget">
    <div class="forget-header">
      <img :src="logo" alt />
      <span>挖挖帮</span>
    </div>
    <div class="forget-title">我们提供便利快捷的一站式接单服务</div>
    <van-form class="forget-form">
      <van-field v-model="mobile" type="number" maxlength="11" placeholder="请输入手机号" clearable />
      <van-field v-model="checkCode" type="number" maxlength="4" clearable placeholder="请输入短信验证码">
        <template #button>
          <van-button
            size="small"
            type="primary"
            :class="{active: isMoblie}"
            @click="onSendCode"
          >{{ isSend ? '重新发送('+ countDown +'s)' : '发送验证码' }}</van-button>
        </template>
      </van-field>
      <van-field v-model="pwd" type="password" placeholder="请输入密码" clearable />
      <van-field v-model="password" type="password" placeholder="请确认密码" clearable />
      <div
        class="forget-form__button"
        :class="{active: isMoblie && pwd === password && pwd !== ''}"
      >
        <van-button round block type="info" @click="onSubmit">重置密码</van-button>
      </div>
      <div class="forget-form__tip">
        <span @click="onOpenWin('index')">使用已有账号登录</span>
      </div>
    </van-form>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      logo: require("./../../assets/logo.png"),
      mobile: "",
      checkCode: "",
      pwd: "",
      password: "",
      isMoblie: false,
      isCode: false,
      isSend: false,
      timer: null,
      countDown: 60
    };
  },
  watch: {
    // 监听手机号
    mobile(newVal) {
      this.isMoblie = /^1[3456789]\d{9}$/.test(newVal);
    },
    // 监听验证码
    checkCode(newVal) {
      this.isCode = newVal.length === 4;
    }
  },
  methods: {
    // 发送验证码
    onSendCode() {
      const _this = this;
      if (!this.isSend && this.isMoblie) {
        this.checkCode = "";
        window.api.showProgress({
          title: "登录中...",
          text: "先喝杯茶...",
          modal: false
        });
        window.api.ajax(
          {
            url: "http://118.25.10.223:8095/nt/user/send_check_code",
            method: "post",
            dataType: "json",
            returnAll: false,
            data: {
              values: {
                mobile: this.mobile
              }
            }
          },
          function(ret, err) {
            window.api.hideProgress();
            if (ret) {
              if (ret.code === 0) {
                _this.$toast({
                  message: "发送成功",
                  onClose: () => {
                    _this.countDown = 60;
                    _this.isSend = true;
                    _this.timer = setInterval(() => {
                      --_this.countDown;
                      if (_this.countDown < 1) {
                        clearInterval(_this.timer);
                        _this.countDown = 60;
                        _this.isSend = false;
                      }
                    }, 1000);
                  }
                });
              } else {
                _this.$toast(ret.msg);
              }
            } else {
              this.$toast(err.msg);
            }
          }
        );
      }
    },
    // 提交
    onSubmit() {
      const _this = this;
      if (!this.isMoblie) {
        this.$toast("手机号输入错误");
        return false;
      }
      if (this.pwd === "" || this.pwd !== this.password) {
        this.$toast("密码输入错误");
        return false;
      }
      window.api.showProgress({
        title: "正在加载...",
        text: "先喝杯茶...",
        modal: false
      });
      window.api.ajax(
        {
          url: "http://118.25.10.223:8095/nt/user/upd_pwd",
          method: "post",
          dataType: "json",
          returnAll: false,
          data: {
            values: {
              mobile: this.mobile,
              pwd: this.pwd,
              checkCode: this.checkCode
            }
          }
        },
        function(ret, err) {
          window.api.hideProgress();

          if (ret) {
            if (ret.code === 0) {
              _this.$toast({
                message: "修改成功，请登录",
                onClose: () => {
                  _this.onOpenWin("index");
                }
              });
            } else {
              _this.$toast(ret.msg);
            }
          } else {
            this.$toast(err.msg);
          }
        }
      );
    },
    // 新窗口
    onOpenWin(name) {
      window.api.openWin({
        name: name,
        url: `./` + name + `.html`,
        bgColor: "#fff"
      });
    }
  }
};
</script>
<style lang="scss" scoped>
.forget {
  width: 100%;
  height: 100%;
  @include flex($direction: column, $flexWrap: nowrap, $justifyContent: center);
  .forget-header {
    @include flex($justifyContent: center);
    img {
      width: 48px;
      margin-right: 10px;
    }
    span {
      font-size: 32px;
    }
  }
  .forget-title {
    margin: 20px 0 40px;
  }
  .forget-form {
    width: 300px;
  }
}
</style>

<style lang="scss">
.forget {
  .van-cell {
    height: 44px;
    background: #fafafa;
    margin-bottom: 15px;
    &:not(:last-child)::after {
      border: none;
    }
  }

  .van-button--primary {
    background: #fafafa;
    border: 1px solid #fafafa;
    .van-button__text {
      color: #cdcdcd;
    }
    &.active {
      .van-button__text {
        color: #e4393c;
      }
    }
  }
  .forget-form__button {
    margin-top: 15px;
    .van-button {
      width: 100%;
      height: 40px;
      background: #ededed;
      border-radius: 5px;
      font-size: 12px;
      font-weight: 500;
      color: #cdcdcd;
      border: 1px solid #ededed;
    }
    &.active {
      .van-button {
        background: #e4393c;
        border: 1px solid #e4393c;
        color: #fff;
      }
    }
  }
  .forget-form__tip {
    line-height: 70px;
    @include flex($justifyContent: center);
    span {
      color: #e4393c;
    }
  }
}
</style>

